<template>
	<view class="_abbr">
		<view class="public">
			<view v-for="item in deviceRecordList" :key="item.replacementId" class="record">
				<view class="record-item">
					<view class="item">
						<view>{{item.oldDeviceQr}}</view>
						<view class="device">{{item.deviceType}} {{item.deviceBrand}} {{item.deviceModel}}</view>
					</view>
					<u-icon name="arrow-downward" color="#2979ff" size="28"></u-icon>
					<view class="item" v-if="item.newDeviceQr">
						<view>{{item.newDeviceQr}}</view>
						<view class="device">{{item.deviceType}} {{item.deviceBrand}} {{item.deviceModel}}</view>
					</view>
					<view v-else>
						<view class="scan-item" style="display: flex; border: 1px solid #eee;">
							<input
								:focus="isFocus" 
								placeholder="扫描或输入二维码" 
								:value="item.newDeviceQr" 
								@blur="confirm($event,item)" 
								type="text"
								class="input">
							<view class="right-icon">
								<view class="icon" @click="doScan1(item)">
									<u-icon size="30" name="scan"></u-icon>
								</view>
							</view>
						</view>
						<view  class="button">
							<u-button type="primary" :plain="true" size="mini" text="取消" @click="handleCancel(item)"></u-button>
						</view>
					</view>
					<view class="footer" />
				</view>
			</view>
		</view>
		<view v-if="deviceRecordList.length === 0">
			<view class="no-record">
				暂无换机记录~
			</view>
		</view>
	</view>
</template>

<script>
import request from "@/utils/request.js";
export default {
	data() {
		return {
			orderTestingId: "",
			isFocus: true, // 二维码是否聚焦
			requestParams: {},
			deviceRecordList: [],
		}
	},
	onLoad(options) {
		uni.showLoading({
			title: '正在加载中'
		})
		this.orderTestingId = options.orderTestingId
		this.getDeviceRecord()
		uni.hideLoading()
	},
	methods: {
		// 扫码id
		doScan1(item) {
			uni.scanCode({
				success: (res) =>{
					item.newDeviceQr = res.result
					this.updateRecord(item)
				}
			})
		},
		// 二维码确定
		confirm(e, item) {
			this.isFocus = false
			if(e.detail.value) {
				item.newDeviceQr = e.detail.value
				if (item.newDeviceQr) {
					this.updateRecord(item)
				}
			}
		},
		// 修改记录
		updateRecord(item) {
			const self = this; // 保存当前对象的引用
			uni.showModal({
				title: '确定换机吗',
				success: function (res) {
					if (res.confirm) {
						request({
							url: 'system/detailReplacement',
							method: "put",
							data: {
								...item,
								method: "replacement_device",
							}
						}).then(res => {
							if (res.code === 200) {
								uni.showToast({
									title:"换机成功",
									icon:'none'
								})
								self.getDeviceRecord()
							} else {
								uni.showToast({
									title:"换机失败",
									icon:'none'
								})
								self.getDeviceRecord()
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
			
		},
		// 取消
		handleCancel(item) {
			const self = this; // 保存当前对象的引用
			uni.showModal({
				title: '确定取消换机吗',
				success: function (res) {
					if (res.confirm) {
						// 提交
						request({
							url: `system/detailReplacement/${item.replacementId}`,
							method: "delete",
						}).then(res => {
							if (res.code === 200) {
								uni.showToast({
									title:"取消换机成功",
									icon:'none'
								})
								self.getDeviceRecord()
							}
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			})
		},
		// 获取记录
		getDeviceRecord() {
			request({
				url: 'system/detailReplacement/list',
				method: "GET",
				data: {
					orderId: this.orderTestingId
				}
			}).then(res => {
				this.deviceRecordList = res.rows
			})
		}
	}
}
</script>

<style lang="scss" scoped>
	._abbr {
		width: 100%;
		height: 100%;
		background-color: rgba(244, 249, 254, 1);
		.no-record {
			display: flex; 
			align-items: center;
			justify-content: center; 
			margin-top: 60px;
			background-color: #fff;
		}
		.public {
			background-color: #ffffff;
			.record {
				border:1px solid;
				border-radius: 2%;
				padding: 20upx 0;
				border-color: rgba(0, 124, 233, 0.4);
				margin: 20upx 0;
				.record-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					.item {
						display: flex;
						flex-direction: column;
						.device {
							font-size: 12px;
							color: #7e7e7e;
							margin: 3px 0;
						}
					}
					.button {
						position: absolute;
						right: 80upx;
						bottom: 10px;
						width: 40rpx !important;
					}
					.footer{
						height:30px;
						background-color: #ffffff;
						border-bottom-left-radius: 15upx;
						border-bottom-right-radius: 15upx;
					}
				}
			}
			.scan-item {
				margin: 10px 0;
				.input {
					margin: 10px 0 10px 6px;
					width: 100%;
				}
				.right-icon {
					position: relative;
					box-sizing: border-box;
					position: sticky;
					top: 0;
					z-index: 999;
					display: flex;
					overflow: hidden;
					justify-content: space-around;
					background: rgb(255, 255, 255);
					margin: 6px;
					.scan {
						position: absolute;
						top: 8upx;
						right: 14px;
					}
				}
				.test-scan {
					border: 1px solid #eee;
					padding: 8px;
				}
			}
			.main_body_view_title {
				border-bottom: 1px solid black;
				margin-bottom: 10upx;
			}
			.user_for {
				display: flex;
			}
			.line_for {
				width: 4rpx;
				height: 24rpx;
				margin: 0 20rpx 10rpx;
			}
			.line_radio {
				width: 20rpx;
				height: 20rpx;
				border-radius: 50%;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				top: 0;
			}
			.right_box {
				padding: 0rpx 20rpx 20rpx 20rpx;
			}
			.desc {
				font-size: 30rpx;
				display: flex;
				margin-top: 20rpx;
				align-items: center;
			}
		}
	}
</style>